<template>
	<el-button class="mb20" @click="add" type="primary">新增</el-button>
	 
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="name" label="新闻" />
		<el-table-column prop="sort" label="排序" />
		<el-table-column label="是否显示">
			<template #default="scope">
			  {{scope.row.isshow==1?'是':'否'}}	
			</template>
		</el-table-column>
		<el-table-column label="是否推荐">
			<template #default="scope">
			  {{scope.row.tuijian==1?'是':'否'}}	
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edits({row:scope.row,index:scope.$index})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- <el-pagination background layout="prev, pager, next" :total="1000">
	</el-pagination> -->
	<el-dialog v-model="modalState" title="新闻">
		<el-form :model="form" ref="rule" :rules="rules">
			<el-form-item label="新闻名称"  prop="name" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新闻描述"  :label-width="formLabelWidth">
				<el-input v-model="form.digest" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新闻外链"  :label-width="formLabelWidth">
				<el-input v-model="form.alink" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新闻排序"  :label-width="formLabelWidth">
				<el-input v-model="form.sort" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="是否显示"  :label-width="formLabelWidth">
				 <el-radio-group v-model="isshow" class="ml-4">
				       <el-radio :label="1" size="large">是</el-radio>
				       <el-radio :label="0" size="large">否</el-radio>
				 </el-radio-group>
			</el-form-item>
			<el-form-item label="是否推荐"  :label-width="formLabelWidth">
				 <el-radio-group v-model="tuijian" class="ml-4">
				       <el-radio :label="1" size="large">是</el-radio>
				       <el-radio :label="0" size="large">否</el-radio>
				 </el-radio-group>
			</el-form-item>
			
			<el-form-item label="新闻图片或视频"   :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :data="jm()" :key="form.images" :action="`${api}/index.php/index/Englishhdapi/uploadfile`"
					:show-file-list="false" :on-success="(file)=>{editimgsProps(file,'images')} ">
						<img v-if="ifType(form.images)=='image'" :src="ifImgHeader(form.images)" class="avatar" />
						<video v-if="ifType(form.images)=='video'" style="width:100%;" class="el-upload-list__item-thumbnail" controls=""
							:src="ifImgHeader(form.images)">
						</video>
					
					
					<i v-if="!form.images" class="el-icon-plus avatar-uploader-icon"></i>
					
				</el-upload>
			</el-form-item>
			<editor-wang :value="contents" @change="changeWang"></editor-wang>
			
               
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import editorWang from '../components/wangEnduit'
	export default {
		components:{
			editorWang
		},
		data() {
			return {
				formLabelWidth: '120px',
				isshow:1, //是否显示 1显示
				tuijian:0, //是否推荐  0 否
				form: {
					name: '',
					id: '',
					digest:"",
					contents:"",
					alink:"",
					images:"",
					sort:"" ,//排序			
				},
				contents:"",
				rules: {
				        name: [
				          {
				            required: true,
				            message: '请填写新闻名称',
				            trigger: 'blur',
				          }
				        ],
						pid: [
						  {
						    required: true,
						    message: '请选择所属新闻',
						    trigger: 'change',
						  }
						],
				},
				pid: []
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			edits(obj){
				this.contents=obj.row.contents
				this.isshow=obj.row.isshow;
				this.tuijian=obj.row.tuijian;
				this.edit(obj)
			},
            changeWang(html) {
				console.log(html)
				this.form.contents=html;
			    
			},
			getData() {
				this.$http.post("/index.php/index/Englishhdapi/newslist").then(data => {
					this.tableData = data
					

				})
			},
			submit(ref) {
				console.log(this.$refs)
				this.doRules(this.$refs[ref]).then(()=>{
					if (this.id) this.form.id = this.id;
					
					this.form.isshow = this.isshow;
					this.form.tuijian = this.tuijian;
					
					this.form.image = "";
					this.$http.post(this.id ? '/index.php/index/Englishhdapi/newsedit' : "/index.php/index/Englishhdapi/newsadd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})
				
			},
			remove(data){
				this.$http.post("/index.php/index/Englishhdapi/newsdel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
